<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>管理员</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" href="css/fontastic.css">
    <!-- Google fonts - Poppins -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="img/favicon.ico">
    <!-- Tweaks for older IEs-->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>

<body>
    <div class="page">
        <!-- Main Navbar-->
        <header class="header">
            <nav class="navbar">

                <div class="container-fluid">
                    <div class="navbar-holder d-flex align-items-center justify-content-between">
                        <!-- Navbar Header-->
                        <div class="navbar-header">
                            <!-- Navbar Brand --><a href="index" class="navbar-brand d-none d-sm-inline-block">
                                <div class="brand-text d-none d-lg-inline-block"><span>欢迎 </span><strong>管理员</strong>
                                </div>
                            </a>
                            <!-- Toggle Button--><a id="toggle-btn" href="#"
                                class="menu-btn active"><span></span><span></span><span></span></a>
                        </div>
                        <!-- Navbar Menu -->
                        <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
                            <li class="nav-item"><a href="login" class="nav-link logout"> <span
                                        class="d-none d-sm-inline">退出</span><i class="fa fa-sign-out"></i></a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
        <div class="page-content d-flex align-items-stretch">
            <!-- Side Navbar -->
            <nav class="side-navbar">
                <ul class="list-unstyled">
                    <li><a href="index"> <i class="icon-home"></i>数据视点</a></li>
                    <li class="active"><a href="#exampledropdownDropdown" aria-expanded="false" data-toggle="collapse">
                            <i class="icon-interface-windows"></i>管理</a>
                        <ul id="exampledropdownDropdown" class="collapse list-unstyled ">
                            <li ><a href="studentTable">学生</a></li>
                            <li><a href="teacherTable">教师</a></li>
                            <li><a href="courseTable">课程信息</a></li>
                            <li><a href="selectionTable">课程评价</a></li>
                            <li class="active"><a href="newsTable">资讯管理</a></li>
                        </ul>
                    </li>
                    <li><a href="news"> <i class="icon-padnote"></i>资讯发布</a></li>

            </nav>
            <div class="content-inner">
                <!-- Page Header-->
                <header class="page-header">
                    <div class="container-fluid">
                        <h2 class="no-margin-bottom">资讯表</h2>
                    </div>
                </header>
                <section class="tables">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card">

                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <div id="app" class="col-12">
                                                <v-table is-horizontal-resize style="width:100%" :columns="columns"
                                                    :table-data="tableData" :cell-edit-done="cellEditDone"
                                                    row-hover-color="#eee" row-click-color="#edf7ff"
                                                    @on-custom-comp="customCompFunc"></v-table>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- Page Footer-->
                <footer class="main-footer">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-6">
                                <p>在线学习 &copy; 2019 慕随心</p>
                            </div>
                        </div>
                    </div>
                </footer>
            </div>
        </div>
    </div>

    <!-- JavaScript files-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/popper.js/umd/popper.min.js"> </script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
    <script src="vendor/chart.js/Chart.min.js"></script>
    <script src="vendor/jquery-validation/jquery.validate.min.js"></script>
    <!-- Main File-->
    <script src="js/front.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/vue-easytable/umd/css/index.css">
    <script src="https://unpkg.com/vue-easytable/umd/js/index.js"></script>
</body>
<script>
    new Vue({
        el: '#app',
        methods: {
            customCompFunc(params) {
                if (confirm("确定删除<<" + params.rowData["newsTitle"] + ">>?")) {
                    var _this = this;
                    axios.delete("/onlineAdmain/api/News", {
                        params: {
                            newsId: params.rowData["newsId"]
                        }
                    }).then(function (response) {
                        if (response["data"]["status"] == "200") {
                            _this.$delete(_this.tableData, params.index);
                        }
                        if (response["data"]["status"] == "400") {
                            alert(response["data"]["msg"]);
                        }
                    });
                }
            }
        },
        created() {
            axios.get('/onlineAdmain/api/News')
                .then(response => (this.tableData = response["data"]["data"]))
        },
        data: function () {
            return {
                tableData: null,
                columns: [
                    { field: 'newsId', title: '资讯编号', width: 200, titleAlign: 'center', columnAlign: 'center' },
                    { field: 'newsTitle', title: '资讯标题', width: 200, titleAlign: 'center', columnAlign: 'center' },
                    { field: 'newsDate', title: '发布日期', width: 200, titleAlign: 'center', columnAlign: 'center' },
                    { field: 'newsTo', title: '资讯对象', width: 100, titleAlign: 'center', columnAlign: 'center' },

                    { field: 'custome-adv', title: '操作', width: 100, titleAlign: 'center', columnAlign: 'center', componentName: 'table-operation', isResize: true }
                ]
            }
        }
    })
    Vue.component('table-operation', {
        template: `
        <button class="btn btn-danger" href="" @click.stop.prevent="deleteRow(rowData,id)">删除</button>
        `,
        props: {
            rowData: {
                type: Object
            },
            index: {
                type: Number
            }
        },
        methods: {
            deleteRow() {
                // 参数根据业务场景随意构造
                let params = { type: 'delete', index: this.index, rowData: this.rowData };
                this.$emit('on-custom-comp', params);

            }
        }
    })
</script>

</html>